import React from 'react';
import { StyleSheet, Text, View, TouchableWithoutFeedback, TouchableHighlight } from 'react-native';

export default class NumBtn extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bg: '#fff'
    };
    this.showBg = this.showBg.bind(this);
    this.hideBg = this.hideBg.bind(this);
  }

  showBg() {
    this.changeState({
      bg: '#eee'
    });
  }

  hideBg() {
    this.changeState({
      bg: '#fff'
    });
  }

  changeState(data) {
    this.setState(state => {
      return { ...state, ...data };
    });
  }

  render() {
    const { label, value, onPress } = this.props;

    return (
      <TouchableWithoutFeedback onPressIn={this.showBg} onPressOut={this.hideBg} onPress={() => { onPress(value || label) }}>
        <View style={[styles.cell, { backgroundColor: this.state.bg }]} >
          <Text style={[styles.txt, this.props.textStyles]} >{label}</Text>
        </View>
      </TouchableWithoutFeedback >
    );
  }
};

const styles = StyleSheet.create({
  cell: {
    flex: 1,
    borderTopColor: '#ccc',
    borderTopWidth: 1,
    borderStyle: 'solid',
    justifyContent: 'center',
    alignItems: 'center'
  },
  txt: {
    fontSize: 30,
    color: '#51545b'
  }
});
